<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .sidenav {
            height: 100%;
            width: 100px;
            position: fixed;
            z-index: 1;
            top: 0px;
            left: 0;
            background-color: blanchedalmond;
            overflow-x: hidden;
            padding-top: 20px;
            
        }

        body {
            text-align: center;
        }

        table {
            margin: auto;
            font-size: 60px;
            text-align: left;
            color: aquamarine;
        }

        img {
            width: 1000px;
            height: 500px;
            margin: auto;
            text-align: center;

        }

        iframe {
            width: 1000px;
            height: 500px;
            margin: auto;
            text-align: center;
        }

        div {
            top: 500px;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;



        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            margin: auto;
            width: 220px;

        }

        li a:hover {
            background-color: #111;
        }

        P {
            color: black;
            text-align: center;
            font-size: 30px;
        }


        .z {
            color: cadetblue;
            font-size: 40px;
        }

        h1 {
            color: cadetblue;
            font-size: 40px;
        }

        h2 {
            color: lightpink;
            font-size: 40px;
        }

        h3 {
            color: darksalmon;
            font-size: 40px;
        }

        h4 {
            color: darksalmon;
            font-size: 40px;
        }
    </style>
</head>

<body>

    <header>


        <ul>
            <li><a href="index.html"> 首页介绍</a></li>

            <li><a href="wf.html">游戏玩法</a></li>
            <li><a href="js.html">游戏角色</a></li>
            <li><a href="fg.html">各地风光</a></li>
            <li><a href="bg.html">报告</a></li>
            <li><a href="gr.html">个人中心</a></li>

        </ul>
        <div class="sidenav">

            <a href="js.html">武神·摩拉克斯</a>
            <a href="js2.html">雷神·雷电将军</a>
            <a href="js3.html">浪人·枫原万叶</a>
            <a href="js4.html">公子·达达利鸭</a>

        </div>
        <p><img src="js1.jpg" </p>
        <table style="text-align: center;">
            <tr>
                <td>中文名：钟离</td>
                <td>外文名：zhongli</td>
            </tr>
            <tr>
                <td>别称：岩王帝君</td>
                <td>CV：彭博</td>
            </tr>
            <tr>
                <td>武器：贯虹之槊</td>
                <td>所属地：璃月</td>
            </tr>
            
            
        </table>
        <iframe src="https://player.bilibili.com/player.html?aid=261145514&bvid=BV1Se411L7qe&cid=849745972&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

    </header>
    <main>


    </main>
    <footer>
        <p><a href="index.html">返回首页</a></p>

    </footer>